<template>
  <div class="app-container">

    <el-dialog
      title="提示"
      :visible.sync="makeImgdialog"
      width="50%"
      :fullscreen="true"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >

      <div style="overflow-y: scroll;height:70vh">
        <Ribao :monthNewData="monthNewData" :other="checkValue" :count="base"></Ribao>
      </div>
      <div id="rbimg" style="position: absolute;z-index: -1;top:0">
        <Ribao :monthNewData="monthNewData" :other="checkValue" :count="base"></Ribao>
      </div>
      <div style="display: flex;justify-content: center;margin-top:40px;">
        <el-button type="success" @click="insertImg">立即插入</el-button>
        <el-button type="primary" @click="makeImgdialog=false">再改改</el-button>
      </div>

    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dataform"
      width="1160px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >

      <el-form ref="form" label-width="100px">
        <div style="display: flex">
          <el-form-item label="今日留言">
            <el-input style="width:200px;" v-model="base.today"></el-input>
          </el-form-item>
          <el-form-item label="今日回复">
            <el-input style="width:200px;" v-model="base.today2"></el-input>
          </el-form-item>
        </div>
      </el-form>

      <div class="dataItem">
        <el-table
          :data="monthNewData"
          style="width: 100%"
        >
          <el-table-column
            prop="userTitle"
            label="提问"
            width="280"
          >
          </el-table-column>
          <el-table-column
            label="回答"
            width="650"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.askName }}:{{ scope.row.askContent }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="180"
          >
            <template slot-scope="scope">
              <i class="el-icon-edit-outline" style="font-size:24px;margin-right:20px;cursor: pointer"
                 @click="editQAdata(scope.$index, scope.row)"
              ></i>
              <i class="el-icon-document-delete" style="font-size:24px;cursor: pointer"
                 @click="delQAdata(scope.$index, scope.row)"
              ></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="forms" style="background: #f6f5f6;padding:30px;">
        <el-form ref="form" label-width="100px">
          <div style="display: flex">
            <el-form-item label="问题分类">
              <el-select v-model="Quest.askType" placeholder="请选择分类" style="width:200px">
                <el-option
                  v-for="item in typeAry"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="自助">
              <el-input style="width:600px;" placeholder="请粘贴链接" v-model="base.links"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="getWidsInfo" style="height: 40px;margin-left: 15px;">获取
            </el-button>
          </div>
          <div style="display: flex">
            <el-form-item label="提问者问题">
              <el-input style="width:400px;" v-model="Quest.userTitle"></el-input>
            </el-form-item>
            <el-form-item label="提问者精简">
              <el-input style="width:400px;" v-model="Quest.userSimpleTitle"></el-input>
            </el-form-item>
          </div>

          <div style="display: flex">
            <el-form-item label="回答者名称">
              <el-input style="width:400px" v-model="Quest.askName"></el-input>
            </el-form-item>
            <div>
              <el-form-item label="内容详情">
                <el-input style="width:400px" type="textarea" :rows="7" v-model="Quest.askContent"></el-input>
                <span @click="aiSimple" style="margin-left: 5px;cursor: pointer;color: #409EFF">{{ aitxt }}</span>
              </el-form-item>
              <el-form-item label="内容精简">
                <el-input style="width:400px" type="textarea" :rows="4" v-model="Quest.askSimpleContent"></el-input>
              </el-form-item>
            </div>
          </div>
          <div style="display: flex;justify-content: space-between;margin:0 60px">
            <span></span>
            <el-button type="primary" @click="addQAdata" v-if="!editids">添加数据</el-button>
            <el-button type="primary" @click="addQAdata" v-else-if="editids">修改数据</el-button>
          </div>

        </el-form>
      </div>

    </el-dialog>


    <el-drawer
      :visible.sync="dayMainStatus"
      direction="rtl"
      title="回音/日报"
      size="50%"
      class="drawer"
      :wrapperClosable="false"
    >
      <el-tabs v-model="activeName" style="margin:0 20px">
        <el-tab-pane label="新版" name="new">
          <div v-loading="newDataloading">
            <el-form ref="form" :model="form" label-width="40px">
              <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="数据">
                <el-button type="success" plain icon="el-icon-s-order" @click="openData">添加数据源</el-button>
                <el-button type="success" plain icon="el-icon-s-order" v-if="monthNewData.length>0" @click="insertData">
                  {{ monthNewData.length }}条数据，全部插入
                </el-button>
                <el-button type="success" plain icon="el-icon-s-order" v-if="monthNewData.length>0" @click="makeImg">
                  生成宣传图
                </el-button>


              </el-form-item>
              <el-form-item label="内容">
                <div style="border: 1px solid rgb(221, 221, 221);">
                  <Toolbar
                    style="border-bottom: 1px solid #ddd;"
                    :defaultConfig="toolbarConfig"
                    :editor="editor"
                    mode="default"
                  />
                  <div class="edit-main">
                    <Editor
                      v-model="form.content"
                      style="height: 500px"
                      mode="default"
                      @onCreated="onCreated"
                    />
                  </div>
                </div>

                <el-row style="margin-top:20px;">
                  <el-button type="primary" @click="review" v-if="!editRibao">发布</el-button>
                  <el-button type="primary" @click="doeditRibao" v-if="editRibao">编辑</el-button>
                  <el-button type="error" @click="delRibao" v-if="editRibao">删除</el-button>
<!--                  <el-button type="info" @click="yulan">预览</el-button>-->
<!--                  <el-button type="success" @click="refpost">重置</el-button>-->
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="老版" name="old">
          <div v-loading="dayMainLoading" style="padding:0;min-height:70vh">
            <el-button
              round
              plain
              type="success"
              style="margin-bottom:30px;display: flex;align-items: center"
              @click.stop="aicreate()"
              :loading="ailoading"
            >
              <div style="display: flex;align-items: center">
                <i class="iconfont icon-dc-icon-rengongzhineng" style="font-size:18px;margin-right:5px;"></i>
                <span>使用Ai自动填充【{{ checkValue }}】</span>
              </div>
            </el-button>
            <el-form ref="form" :model="form" label-width="40px">
              <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="内容">
                <!--                <div style="border: 1px solid rgb(221, 221, 221);">-->
                <!--                  <Toolbar-->
                <!--                    style="border-bottom: 1px solid #ddd;"-->
                <!--                    :defaultConfig="toolbarConfig"-->
                <!--                    :editor="editor2"-->
                <!--                    mode="default"-->
                <!--                  />-->
                <!--                  <div class="edit-main">-->
                <!--                    <Editor-->
                <!--                      v-model="form.content"-->
                <!--                      style="height: 500px"-->
                <!--                      mode="default"-->
                <!--                      @onCreated="onCreated2"-->
                <!--                    />-->
                <!--                  </div>-->
                <!--                </div>-->
                <el-row style="margin-top:20px;">
                  <el-button type="primary" @click="review">发布</el-button>
                  <el-button type="success" @click="refpost">重置</el-button>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>

    </el-drawer>
    <div class="calendarMain" v-loading="PageLoading">
      <div class="upload">
<!--        <el-upload-->
<!--          class="upload-demo"-->
<!--          :action="uploadUrl"-->
<!--          :on-success="txtUploadTxt"-->
<!--          multiple-->
<!--          :limit="1"-->
<!--          :show-file-list="false"-->
<!--          accept=".txt"-->
<!--        >-->
<!--          <el-button size="medium" type="primary" icon="el-icon-top" plain>点击上传txt</el-button>-->
<!--        </el-upload>-->
      </div>
      <el-calendar v-model="dateParms.starTime">
        <template slot="dateCell" slot-scope="{date, data}">
          <div class="calendarBox">
            {{ data.day.split('-').slice(2).join('-') }}
            <div v-for="(item,idx) in  thisMonthData">
              <div class="item" v-if="item.pk_time==data.day" @click="editDay(item.id)">
                {{ item.title }}
              </div>
            </div>
            <div class="itemPlus" @click.stop="add(data.day)">
              + 新增
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script>
import { Aicreate, getDayReport, getRibaoWzinfo, reportDopost, getRibaoData ,delDopost} from '@/api/wz'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import Ribao from '@/components/Charts/ribao/Ribao'
import html2canvas from 'html2canvas'
import { uploadHb } from '@/api/count'
import { getDoubaoSimpleRibao } from '@/api/ai'
import Cookies from 'js-cookie'

export default {
  components: { Editor, Toolbar, Ribao },
  data() {
    return {
      html: '',
      aitxt: 'Ai精简',
      uploadUrl: 'https://www.wz1.com/superAdmin.Report/uploadTxt?token=' + encodeURIComponent(Cookies.get('vue_admin_template_token')),
      Quest: {
        userTitle: '',
        userSimpleTitle: '',
        askName: '',
        askType: '',
        askContent: '',
        askSimpleContent: ''
      },
      base: { today: 0, today2: 0, links: '' },
      editRibao:'',
      editids: 0,
      typeAry: ['咨询', '建言', '投诉', '求助', '感谢'],
      dataform: false,
      newDataloading: false,
      monthNewData: [],
      editor: {},
      editor2: {},
      makeImgEnd: '',
      toolbarConfig: {
        excludeKeys: 'emotion,group-more-style,underline,italic,color,fontSize,lineHeight,fontFamily,|,codeBlock,fullScreen,undo,redo,group-video,group-indent,todo'
      },
      activeName: 'new',
      PageLoading: true,
      nowDay: '',
      dayMainLoading: true,
      dayMainStatus: false,
      ailoading: false,
      dateParms: {
        starTime: ''
      },
      checkValue: '',
      form: {
        title: '',
        content: '',
        thumbData: {},
        thumbBase: {}
      },
      makeImgdialog: false,
      thisMonthData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    editDay(id) {
      this.newDataloading = true
      this.dayMainStatus = true
      getRibaoData({ id: id }).then(r => {
        this.newDataloading = false
        this.form = r.data
        this.editRibao = id;
        if(r.data.thumbData){
          this.$set(this.form, 'thumbData', r.data.thumbData)
          this.monthNewData = r.data.thumbData
        }
        if(r.data.thumbBase){
          this.$set(this.form, 'thumbBase', r.data.thumbBase)
          this.base = r.data.thumbBase
        }
        if(r.data.checkValue){
          this.checkValue = r.data.checkValue
        }
      })
    },
    txtUploadTxt() {

    },
    getWidsInfo() {
      let wid = 0
      if (!isNaN(this.base.links)) {
        wid = this.base.links
      } else {
        var regex = /(wid=)+(\d+)/
        var string = this.base.links
        var result = regex.exec(string)
        wid = result[2]
      }
      getRibaoWzinfo({ wid: wid }).then(response => {
        console.log(response)
        this.Quest = {
          userTitle: response.data.title,
          askName: response.data.reply ? response.data.reply[0].rname : '',
          userSimpleTitle: '',
          askContent: response.data.reply ? response.data.reply[0].l_reply.replace(/<[^>]*>/g, '') : '',
          askType: this.typeAry[response.data.type - 1],
          askSimpleContent: ''
        }
      })
    },
    delQAdata(index) {
      this.monthNewData.splice(index, 1)
    },
    makeImg() {
      this.makeImgdialog = true
    },
    editQAdata(index, data) {
      this.Quest = {
        userTitle: data.userTitle,
        askName: data.askName,
        userSimpleTitle: data.userSimpleTitle,
        askContent: data.askContent,
        askType: data.askType,
        askSimpleContent: data.askSimpleContent
      }
      this.editids = index + 1
    },
    openData() {
      this.Quest = {
        userTitle: '',
        askName: '',
        askContent: '',
        askType: '',
        userSimpleTitle: '',
        askSimpleContent: ''
      }
      this.dataform = true
    },
    insertData() {
      // this.newDataloading = true
      let html = ''
      for (let key in this.monthNewData) {
        let title = '[title row=' + (parseInt(key) + 1) + ']' + this.monthNewData[key].userSimpleTitle + '[/title]'
        html += '<p>' + title + '</p>'
        html += '<blockquote><strong>群众呼声网民留言：</strong>' + this.monthNewData[key].userTitle + '<br><br><strong>' + this.monthNewData[key].askName + '：</strong>' + this.monthNewData[key].askContent + ' </blockquote><br>'
      }
      this.$set(this.form, 'content', html)
    },
    insertImg() {
      this.makeImgdialog = false
      this.newDataloading = true
      let dom1 = document.getElementById('rbimg')
      html2canvas(dom1, {
        scale: 2,
        height: document.getElementById('rbimg').scrollHeight,
        windowHeight: document.getElementById('rbimg').scrollHeight
      }).then(canvas => {
        // 将canvas转换为图片URL
        const imgUrl = canvas.toDataURL('image/png')
        uploadHb({ img: imgUrl, imgText: this.form.title, type: 2 }).then(res => {
          if (res.code == 200) {
            this.newDataloading = false
            let html = '<p style="text-align: center;margin:0 !important;"><img src="https://wz.mala.cn/' + res.data + '" alt="' + this.form.title + ' - 群众呼声四川问政"></p>'
            this.$set(this.form, 'content', html + '<br>' + this.form.content)
          }
        }).catch(() => {
          this.newDataloading = false
        })
      })
    },
    aiSimple() {
      this.aitxt = '思考中...'
      if (this.Quest.askContent) {
        getDoubaoSimpleRibao({ content: this.Quest.askContent }).then(r => {
          this.$set(this.Quest, 'askSimpleContent', r.data)
          this.aitxt = 'Ai精简'
        })
      } else {
        this.$message.error('请输入回答者内容')
      }
    },
    addQAdata() {
      if (this.editids) {
        this.$set(this.monthNewData, this.editids - 1, this.Quest)
        this.editids = 0
        this.$set(this.form, 'thumbData', this.monthNewData)
        this.$set(this.form, 'thumbBase', this.base)
        this.Quest = {
          userTitle: '',
          askName: '',
          userSimpleTitle: '',
          askContent: '',
          askSimpleContent: '',
          askType: ''
        }

        this.$set(this.base, 'links', '')
      } else {
        let monthNewData = JSON.parse(JSON.stringify(this.monthNewData))
        monthNewData.push(this.Quest)
        this.monthNewData = monthNewData
        this.$set(this.form, 'thumbData', monthNewData)
        this.$set(this.form, 'thumbBase', this.base)
        this.Quest = {
          userTitle: '',
          askName: '',
          askType: '',
          userSimpleTitle: '',
          askContent: '',
          askSimpleContent: ''
        }
        this.$set(this.base, 'links', '')
      }

    },
    doeditRibao() {
      reportDopost({editRibaoid:this.editRibao,...this.form}).then(r => {
        localStorage.removeItem('ribao')
        this.fetchData()
        this.refpost()
        this.dayMainStatus = false
        this.$message.success('编辑成功')
      })
    },
    delRibao(){
      this.$confirm('此操作将永久删除该日报, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.newDataloading = true
        delDopost({editRibaoid:this.editRibao,...this.form}).then(r => {
          this.dayMainStatus = false
          this.PageLoading = true
          localStorage.removeItem('ribao')
          this.fetchData()
          this.refpost()
          this.$message.success('删除成功')
        })
      })
    },
    review() {
      this.PageLoading = true
      this.newDataloading = true
      reportDopost({date:this.checkValue,...this.form}).then(r => {
        localStorage.removeItem('ribao')
        this.fetchData()
        this.refpost()
        this.dayMainStatus = false
        this.$message.success('发布成功')
        window.open('https://wz.mala.cn/wz/sdzz?sdzz=huiyin&&id=' + r.data)
      })
    },
    yulan() {
      localStorage.setItem('ribao_monthNewDaTA', JSON.stringify(this.monthNewData))
      localStorage.setItem('ribao', JSON.stringify(this.form))
      window.open('https://wz.mala.cn/wz/ribaoCaogao')
    },
    refpost() {
      this.form = {
        title: '',
        content: ''
      }
      this.Quest = {
        userTitle: '',
        askName: '',
        userSimpleTitle: '',
        askContent: '',
        askType: '',
        askSimpleContent: ''
      }
      this.base = { today: 0, today2: 0 }
      this.monthNewData = []
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    // onCreated2(editor2) {
    //   this.editor2 = Object.seal(editor2)
    // },
    aicreate() {
      this.ailoading = true
      Aicreate({ day: this.checkValue || '' }).then(r => {
        this.ailoading = false
        this.form = {
          title: r.data.title,
          content: r.data.content
        }
      }, data => {
        this.ailoading = false
      })
    },
    add(day) {
      this.editRibao = 0
      this.checkValue = day
      this.dayMainStatus = true
      this.dayMainLoading = false
      this.activeName = 'new'
      this.form = {
        title: '麻辣社区《群众呼声》每日问政播报（' + this.formatDate(day) + '）',
        content: ''
      }
      this.monthNewData = []
      this.Quest = {
        userTitle: '',
        askName: '',
        askType: '',
        userSimpleTitle: '',
        askContent: '',
        askSimpleContent: ''
      }
      this.base = { today: 0, today2: 0, links: '' }
      this.newDataloading = false
    },
    fetchData() {
      getDayReport(this.dateParms).then(r => {
        this.thisMonthData = r.data.data
        this.nowDay = r.data.now
        this.PageLoading = false
      })
    },
    formatDate(dateStr) {
      const parts = dateStr.split('-')
      const year = parts[0]
      const month = parts[1]
      const day = parts[2]
      return `${month}月${day}日`
    }
  }
}
</script>
<style lang="scss">
.upload {
  position: absolute;
  top: 5px;
  left: 150px;
}

.w-e-text-container {
  a {
    color: #336699;
  }
}

.calendarMain {
  position: relative;

  .el-calendar-day {
    height: 110px;
  }

  .el-calendar__title {
    font-size: 18px;
    font-weight: bold;
    color: #20a0ff;
  }

}

.daytitle {
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  height: 54px;

  .top-bar {
    width: 40px;
    height: 7px;
    background-color: #ffebb3;
    margin-left: 20px;
    z-index: 2;
    box-sizing: border-box;
  }

  .btm-bar {
    width: 40px;
    height: 7px;
    background-color: #ffebb3;
    margin-left: 20px;
    z-index: 2;
    box-sizing: border-box;
  }

  .btm-r-bar {
    margin-left: auto;
    margin-top: -10px;
    z-index: 3;
    width: 77%;
    box-sizing: border-box;
    max-width: 77%;

    .b {
      width: 100%;
      height: 14px;
      background-color: #ffebb3;
      max-width: 100% !important;
      box-sizing: border-box;
      position: relative;
      z-index: 101;

      &:after {
        content: "";
        position: absolute;
        width: 0;
        z-index: 1;
        overflow: hidden;
        bottom: 0px;
        height: 1px;
        border-left: 5px solid transparent;
        border-right: 3.5px solid transparent;
        border-top: 11px solid #f6d26f;
        margin-top: -14px;
        margin-left: -7px;
        box-sizing: border-box;
        transform: skew(15deg);
        -webkit-transform: skew(15deg);
        -moz-transform: skew(15deg);
        -o-transform: skew(15deg);
      }
    }
  }

  .mid-html {
    display: flex;
    align-items: center;
    height: 40px;
    position: relative;
    z-index: 100;
    background-color: #1c61e1;

    .mid-bar {
      background-color: #ffebb3;
      width: 40px;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      color: #fff;
      justify-content: center;
      box-sizing: border-box;
      margin-left: 20px;
    }

    .title-txt {
      color: #fff;
      padding: 0 20px;
    }
  }
}

</style>
<style lang="scss" scoped>

.edit-main {
  height: 500px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #aaa;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}

.calendarMain {
  .calendarBox {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;

    &:hover {
      .itemPlus {
        display: block;
      }
    }

    .itemPlus {
      color: #ed883f;
      position: absolute;
      top: 0px;
      right: 5px;
      text-align: right;
      font-size: 12px;
      display: none;
    }

    .item {
      padding: 5px;
      font-size: 12px;
      text-align: justify;
      border-radius: 5px;
      color: #409EFF;
      background: #ecf5ff;

      &:hover {
        color: #ed883f;
      }
    }
  }
}
</style>
